<template>
    <view class="gjl-view">
        <view class="main">
            <view class="haibao-box">
                <image :show-menu-by-longpress="true" :src="imgsrc" mode=""></image>
            </view>
        </view>
        <view class="chengqi-box"></view>
        <view class="footer-box">
            <button :plain="true" open-type="share" class="btn border" >分享给好友</button>
            <button class="btn bgc" @click="saveImg">保存至本地</button>
        </view>
        <mSetimg ref="setimg" :canvasWH="canvasWH"></mSetimg>
    </view>
</template>

<script>
    import mSetimg from '@/components/m-setimg/m-setimg.vue'
    
    export default {
        components: {
            mSetimg
        },
        data() {
            return {
                imgList: [],
                imgsrc: '',
                canvasWH: {
                    width: 690,
                    height: 1228
                },
                token: ''
            }
        },
        onLoad(item) {
            uni.getStorage({
                key: 'token',
                success: (res)=> {
                    this.token = res.data
                    this.haibaostr()
                }
            });
        },
        methods: {
            onShareAppMessage(res) {
            	if (res.from === 'button') {
            		// 来自页面内分享按钮
            		console.log(res.target);
            	}
            	return {
            		title: `邀请您加入拇指宫殿`,
            		path: this.imgsrc
            	};
            },
            // 保存图片
            saveImg(){
                this.$utils.saveImg(this.imgsrc)
            },
            haibaostr() {
                setTimeout(() => {
                    let ImgData = {
                        imgList: [{
                            u: 'https://img.thumbrary.com/tuiguanghaibao.png',
                            x: 0,
                            y: 0,
                            h: 1228,
                            w: 690
                        },
                        {
                            u: `https://xcxapi.thumbrary.com/xcxapi/share?token=${this.token}`,
                            x: 206,
                            y: 730,
                            h: 280,
                            w: 280
                        }],
                        textList: []
                    }
                    this.$refs.setimg.haibao(ImgData, (res) => {
                        this.imgsrc = res;
                    })
                }, 200)
            },
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view{
        height: 100%;
    }
    .chengqi-box{
        height: 100rpx;
    }
    .footer-box{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 5rpx 30rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        .btn.border{
            border:1px solid rgba(43,168,252,1);
            color:rgba(43,168,252,1);
        }
        .btn.bgc{
            background:rgba(43,168,252,1);
        }
        .btn{
            box-sizing: border-box;
            width: 335rpx;
            height: 88rpx;
            line-height: 88rpx;
            font-size:32rpx;
            font-weight:400;
            border-radius:10rpx;
            color:rgba(255,255,255,1);
        }
    }
    .main{
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        padding: 37rpx 72rpx 0;
    }
    .tip-box{
        text-align: center;
        margin-top: 21rpx;
        font-size:28rpx;
        font-weight:400;
        color:rgba(153,153,153,1);
    }
    .haibao-box{
        height: 1079rpx;
        width: 607rpx;
        image{
            height: 100%;
            width: 100%;
        }
    }
</style>
